<script setup lang="ts">
import { reactive, watch } from 'vue'
import { useVirtualList } from '@vueuse/core'

// 模拟数据
const mock= () => {
            for (let i = 0; i < 500; i++) {
                data.arr.push({
                    title: i + '',
                    date: '2020-01-01',
                    id: i + ''
                })
            }
        }


// 写一个对象，用来存储inputTitle和inputDate
const data = reactive({
    currentIndex: 0,
    inputTitle: '',
    inputDate: '',
    selectId: -1,
    arr: JSON.parse(localStorage.getItem('arr') || '[]')
})
// 写一个方法，用来处理提交
const SubmitEvent = () => {
    if (!data.inputTitle) {
        alert('请输入标题')
        return
    }
    if (!data.inputDate) {
        alert('请选择日期')
        return
    }

    if (data.selectId !== -1) {
        // console.log(data.selectId)
        // 实现修改功能
        data.arr.find((item: any) => {
            if (item.id === data.selectId) {
                item.title = data.inputTitle
                item.date = data.inputDate
            }
        })
    } else {
        data.arr.push({
            title: data.inputTitle,
            date: data.inputDate,
            id: +new Date()
        })
    }
    data.inputTitle = ''
    data.inputDate = ''
    data.selectId = -1
}
// 写一个方法，处理编辑功能
const editEvent = (title:string,date:string,index: number) => {
    // const item = data.arr.find((item: any) => item.id === id)
    data.inputTitle = title
    data.inputDate = date
    data.selectId = index
}
// 写一个方法，实现编辑功能切换
const switchAdd = () => {
    data.inputTitle = ''
    data.inputDate = ''
    data.selectId = -1
}
// 写一个方法，处理删除功能
const deleteEvent = (index: number) => {
    // console.log(index)
    data.arr.splice(index, 1)
}
// 虚拟列表实现
// const [isEven, toggle] = useToggle()
const allItems = data.arr
// const filteredList = computed(() => allItems.slice(data.currentIndex, data.currentIndex + 5))

const { list, containerProps, wrapperProps } = useVirtualList(
    allItems,
    {
        itemHeight: 40,
    },
)
const saveList = watch(data.arr,() => {
    localStorage.setItem('arr', JSON.stringify(data.arr))
})
</script>

<template>
    <!-- 写一个h3显示在编辑或添加 -->
    <h3>{{ data.selectId === -1 ? '添加' : '编辑' }}</h3>
    <button @click="mock">添加数据</button>
    <!-- 写两个输入框，一个填写姓名，一个填写日期 -->
    <div>
        <input type="text" v-model="data.inputTitle">
        <input type="date" v-model="data.inputDate">
        <button @click="SubmitEvent">提交</button>
        <button @click="switchAdd">切换添加</button>
    </div>
    <!-- 写一个表格，带有标题，日期和操作 -->
    <table>
        <thead>
            <tr>
                <th>标题</th>
                <th>日期</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody v-bind="containerProps" style="height: 200px;display: block;">
            <div v-bind="wrapperProps">
                <tr v-for="(item,index) in list" :key="item.data.id" style="height: 40px;display: block;">
                    <!-- <td>{{ item.data }}</td> -->
                    <td>{{ item.data.title }}</td>
                    <td>{{ item.data.date }}</td>
                    <td>
                        <button @click="editEvent(item.data.title, item.data.date, item.data.id)">编辑</button>
                        <button @click="deleteEvent(item.index)">删除</button>
                    </td>
                    <!-- Row: {{ item.data }} -->
                </tr>
            </div>
        </tbody>
    </table>
</template>